<template>
    <div>
        <van-nav-bar title="商品搜索" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- <div style="height: 40px;"></div> -->
        <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        <van-cell-group v-for="item in qsearch">
            <van-cell :title="item.goods_id"  />
        </van-cell-group>
        <div class="lis">
            <h4>历史搜索</h4>
            <van-tag type="primary" size="large">电视剧</van-tag>
            <van-tag type="primary" size="large">液晶电视</van-tag>
            <van-tag type="primary" size="large">液晶屏幕</van-tag>
            <van-tag type="primary" size="large">智能手机</van-tag>
            <van-tag type="primary" size="large">苹果手机</van-tag>
            <van-tag type="primary" size="large">华为手机</van-tag>
        </div>
        <div class="lien">
            <h4>热门搜索</h4>
            <van-tag type="primary" size="large">手机电池</van-tag>
            <van-tag type="primary" size="large">mp3</van-tag>
            <van-tag type="primary" size="large">摄像机</van-tag>
            <van-tag type="primary" size="large">液晶电视</van-tag>
            <van-tag type="primary" size="large">录音笔</van-tag>
            <van-tag type="primary" size="large">电脑桌</van-tag>
            <van-tag type="primary" size="large">双人床</van-tag>
            <van-tag type="primary" size="large">衣柜</van-tag>
        </div>
    </div>

</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api'
let value = ref('')
let qsearch = ref([])
watch(value, (we) => {
    // console.log('搜索数据', we);
    qsearchApi(we).then(res => {
        console.log('搜索数据', res);
        qsearch.value = res.data.messgae
    })
})
</script>

<style lang="scss" scoped></style>